import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import Select, { Option } from '@kuiper-components/select';
import Input from '@kuiper-components/input';
import Button from '@kuiper-components/button';

import { Search24 as SearchIcon } from '@carbon/icons-react';

import { datetime } from '../../../../../../common/formatter';
import Empty from '../../../../../components/empty/EmptyData';
import ChartTitle from '../../../../../components/ChartTitle';
import s from './Table.module.css';

const SUB_DOMAIN_MAP = {
	add: '上线',
	remove: '下线',
};

export default function Table({ className, dataSource }) {
	const [affects, setAffects] = React.useState();
	const [filter, setFilter] = React.useState({});

	const tableData = React.useMemo(() => {
		return dataSource.filter(row => {
			if (filter.affects) {
				return row.affects === filter.affects;
			} else {
				return row;
			}
		});
	}, [filter, dataSource]);

	const handleReset = () => {
		setFilter({});
		setAffects('');
	};

	const handleAffectsSubmit = () => {
		handleSubmit({ affects });
	};

	const handleAffectsChange = val => {
		if (!val) handleSubmit({ affects: undefined });
		setAffects(val);
	};

	const handleSubmit = data => {
		const variables = JSON.parse(JSON.stringify({ ...filter, ...data }));
		setFilter(variables);
	};

	return (
		<div className={cn(className, s.table)}>
			<ChartTitle>域名变动详情</ChartTitle>
			<div className={s.filterContainer}>
				<Input
					className={cn(s.input, s.item)}
					value={affects}
					type="search"
					onChange={handleAffectsChange}
					onPressEnter={handleAffectsSubmit}
					after={
						<SearchIcon
							className={s.searchIcon}
							onClick={handleAffectsSubmit}
						/>
					}
					placeholder="请输入子域名"
				/>
				<div className={s.selectContainer}>
					<Button onClick={handleReset}>重置</Button>
				</div>
			</div>
			<div className={s.tableContainer}>
				<table className={cn(s.tableContent, 'tableFormat')}>
					<thead>
						<tr className={s.head}>
							<th className={s.date}>时间</th>
							<th className={s.domain}>子域名</th>
							<th className={s.type}>变动类型</th>
							{/* <th className={s.status}>状态</th> */}
						</tr>
					</thead>
					<tbody className={s.tbody}>
						{tableData.map(row => (
							<tr key={row.affects}>
								<td>{datetime(row.datetime)}</td>
								<td className={s.domain}>{row.affects}</td>
								<td>{SUB_DOMAIN_MAP[row.type]}</td>
								{/* <td>
									{row.isResolved ? (
										'已确认'
									) : (
										<span className={s.warn}>未确认</span>
									)}
								</td> */}
							</tr>
						))}
					</tbody>
				</table>
				{tableData.length === 0 && <Empty className={s.empty} />}
			</div>
		</div>
	);
}

Table.propTypes = {
	className: PropTypes.string,
	dataSource: PropTypes.arrayOf(
		PropTypes.shape({
			datetime: PropTypes.object,
			affect: PropTypes.string,
			type: PropTypes.string,
			isResolved: PropTypes.bool,
		})
	),
};

Table.defaultProps = {
	className: s.table,
};
